<script setup lang="ts">
// IntersectionObserver 方法 检测滚动窗口 需要的目标元素是否进入了可视区
// 1. 导入useIntersectionObserver
import { useIntersectionObserver } from '@vueuse/core'
// 2. 准备一个ref对象和模板结构关联
import { ref } from 'vue'
const target = ref<HTMLImageElement | null>(null)
// 3. 调用方法
// useIntersectionObserver(dom元素, ()=> {这个回调函数中书写的是进入可视区/离开可视区的代码})
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  // isIntersecting是一个布尔值, dom元素进入了可视区, 为true, 出了可视区为false
  console.log(isIntersecting)
  // 进入可视区后, 设置图片的src
  if (isIntersecting) {
    // console.dir(target.value)
    target.value!.src =
      'https://img0.baidu.com/it/u=1273101529,1464228944&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1661533200&t=2fac35d924d291ba40eb14c9f39c7f3a'
    stop() // 只要进入了可视区后, 就不再进行滚动监听了
  }
})
</script>
<template>
  <div class="box"></div>
  <img src="" ref="target" />
</template>

<style scoped>
.box {
  height: 2000px;
  background-color: green;
}
</style>
